<template>
    <div class="textarea-container">
        <el-input type="textarea" v-bind="$attrs">
        </el-input>
        <slot name="button"/>
    </div>
</template>

<script setup lang="ts" name="VpTextarea">
    
</script>

<style scoped lang="scss">
    .textarea-container {
        display: flex;
        align-items: stretch;
        width: 100%;
        :deep(.el-textarea__inner) {
            border-bottom-right-radius: 0px;
            border-top-right-radius: 0px;
        }
        :deep(.el-button) {
            height: auto;
            align-items: center;
            background-color: var(--el-fill-color-light);
            border-radius: var(--el-input-border-radius);
            color: var(--el-color-info);
            display: inline-flex;
            justify-content: center;
            min-height: 100%;
            padding: 0 20px;
            position: relative;
            white-space: nowrap;
            border-left: 0;
            box-shadow: 0 1px 0 0 var(--el-input-border-color) inset, 0 -1px 0 0 var(--el-input-border-color) inset, -1px 0 0 0 var(--el-input-border-color) inset;
        }
    }

</style>